[CSS] CSS image Sprites 알아보기

CSS 이미지 스프라이트 기법에 대하여 알아보려고 합니다. 우선 CSS 이미지 스프라이트란 무엇이고 어떤 효과가 있는지 간략하게 알아보도록 하겠습니다.

# CSS Image Sprite 기법 알아보기

웹페이지에 사용되는 이미지는 다양합니다. 배경 이미지가 있을 수 있고 그 밖에 아이콘이나 텍스트, 제목 등이 사용되는 이미지가 있겠죠. 여기서 Image Sprite는 하나의 이미지를 하나의 파일로 저장하여 불러오는 것이 아니라 여러개의 이미지를 모아서 하나의 파일로 만들어 사용하는 것을 말합니다.

! 하나로 만든 이미지를 어떻게 불러오는가?
여러개의 이미지가 각각의 위치에 배치되어 있으므로 이미지의 좌표를 사용하여 불러옵니다. 그래서 background-position 프로퍼티를 사용하게됩니다. 아래와 같이 몇 가지 css 프로퍼티가 함께 사용됩니다.

background-position
background-size
width
height

이처럼 여러 이미지가 저장된 하나의 파일에서 위치값을 사용해 선택하는 기법이 바로 이미지 스프라이트 기법입니다. 그럼 이 방법을 사용하는 이뉸느 무엇일까요?

! Image Sprite의 장점

먼저 스프라이트 기법의 장점을 알아봅니다.

- 이미지 로딩 시간이 짧음
; 처음 파일을 읽으면 여러 이미지가 한 번에 로딩되므로 나중에 로딩되는 이미지와 처음 로딩되는 이미지의 지연시간 차이가 없습니다. 쉽게 말해 깜박이거나 하지 않습니다.

- 이미지 관리가 편리하다
여러 파일을 수정할 필요 없이 하나의 파일만 수정하면 되므로 관리적인 측면에서 효율적입니다.

! Image Sprite의 단점은?

웹페이지의 업데이트가 자주 있다면 스프라이트 이미지 역시 자주 업데이트 해주어야 할 것입니다. 만약 추가되는 부분이 없이 삭제되는 이미지만 있다면 그대로 사용해도 무방하겠지만 원래의 의도, 가볍고 빠른 성능을 제대로 발휘할 수 없겠죠.

CSS를 사용해야 한다.
퍼블리싱이 익숙하지 않다면 CSS를 사용한 position 속성이 어려울 수도 있습니다. 또한 이미지 크기의 조정이 IE 9.0 이상 버전에서 부터 가능합니다.

이런 단점도 있지만 사실 큰 단점은 아니기에 많은 웹사이트가 이 기법을 활요하고 있습니다. 특히 버튼 또는 아이콘의 호버(Hover, 롤오버) 기능을 적용할 때 매우 쉽게 활용할 수 있고, 코드 역시 간결하다는 매우 큰 장점이 있습니다.